<script lang="ts" setup>
import SingleImageUpload from "@/common/components/upload/SingleImageUpload.vue"
// 表单引用
const formRef = ref()
const uploadRef = ref()

// 表单数据
const formData = reactive({
  googleEmail: "",
  timezone: "",
  websiteDomain: "",
  settlementCurrency: "USD",
  accountName: "",
  preDepositAmount: "",
  companyName: "",
  businessLicense: "",
  companyAddress: ""
})

// 文件列表
const fileList = ref([])

// 表单验证规则
const formRules = {
  googleEmail: [
    { required: true, message: "请输入谷歌邮箱", trigger: "blur" },
    { type: "email" as const, message: "请输入正确的邮箱格式", trigger: "blur" }
  ],
  timezone: [
    { required: true, message: "请选择时区", trigger: "change" }
  ],
  websiteDomain: [
    { required: true, message: "请输入网站域名", trigger: "blur" },
    { pattern: /^https?:\/\/.+/, message: "请输入正确的网址格式", trigger: "blur" }
  ],
  settlementCurrency: [
    { required: true, message: "请选择结算货币", trigger: "change" }
  ],
  accountName: [
    { required: true, message: "请输入账户名称", trigger: "blur" }
  ],
  preDepositAmount: [
    { required: true, message: "请输入预存金额", trigger: "blur" },
    { pattern: /^\d+(\.\d{1,2})?$/, message: "请输入正确的金额格式", trigger: "blur" }
  ],
  companyName: [
    { required: true, message: "请输入公司名称", trigger: "blur" }
  ],
  businessLicense: [
    { required: true, message: "请上传营业执照附件", trigger: "change" }
  ],
  companyAddress: [
    { required: true, message: "请输入公司地址", trigger: "blur" }
  ]
}

// 文件上传前验证
function beforeUpload(rawFile: File) {
  const isImage = ["image/jpeg", "image/jpg", "image/png"].includes(rawFile.type)
  const isLt20M = rawFile.size / 1024 / 1024 < 20

  if (!isImage) {
    ElMessage.error("只能上传 JPG/PNG/JPEG 格式的图片!")
    return false
  }
  if (!isLt20M) {
    ElMessage.error("文件大小不能超过 20MB!")
    return false
  }
  return true
}

// 文件变化处理
function handleChange(file: any) {
  formData.businessLicense = file.name
}

// 文件移除处理
function handleRemove() {
  formData.businessLicense = ""
}

// 取消操作
function handleCancel() {
  ElMessage.info("已取消申请")
  // 可以添加路由跳转或其他逻辑
}

// 提交表单
async function handleSubmit() {
  if (!formRef.value) return

  try {
    await formRef.value.validate()

    if (!formData.businessLicense) {
      ElMessage.error("请上传营业执照附件")
      return
    }

    ElMessage.success("申请提交成功!")
    console.log("表单数据:", formData)
    // 这里可以添加提交到后端的逻辑
  } catch (error) {
    console.log("表单验证失败:", error)
  }
}
</script>

<template>
  <div class="form-content">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="120px"
      class="application-form"
    >
      <!-- 账户信息 -->
      <div class="form-section">
        <h3 class="section-title">
          账户信息
        </h3>

        <el-form-item label="谷歌邮箱" prop="googleEmail" class="form-item">
          <el-input
            v-model="formData.googleEmail"
            placeholder="请输入谷歌邮箱"
            clearable
          />
        </el-form-item>

        <el-form-item label="时区" prop="timezone" class="form-item">
          <el-select
            v-model="formData.timezone"
            placeholder="请选择时区"
            style="width: 100%"
          >
            <el-option label="Asia/Shanghai/UTC+8" value="Asia/Shanghai" />
            <el-option label="Asia/Tokyo/UTC+9" value="Asia/Tokyo" />
            <el-option label="Asia/Seoul/UTC+9" value="Asia/Seoul" />
            <el-option label="Asia/Manila/UTC+8" value="Asia/Manila" />
            <el-option label="Asia/Bangkok/UTC+7" value="Asia/Bangkok" />
            <el-option label="Asia/Jakarta/UTC+7" value="Asia/Jakarta" />
            <el-option label="Asia/Singapore/UTC+8" value="Asia/Singapore" />
            <el-option label="Asia/Kuala_Lumpur/UTC+8" value="Asia/Kuala_Lumpur" />
            <el-option label="Asia/Hong_Kong/UTC+8" value="Asia/Hong_Kong" />
            <el-option label="Asia/Taipei/UTC+8" value="Asia/Taipei" />
          </el-select>
        </el-form-item>

        <el-form-item label="网站域名" prop="websiteDomain" class="form-item">
          <el-input
            v-model="formData.websiteDomain"
            placeholder="请输入网站域名"
            clearable
          />
          <div class="form-tip">
            请确认推广链接是可打开而且是可正常跳转的状态。链接示例:https://www.hsou.cn
          </div>
        </el-form-item>

        <el-form-item label="结算货币" prop="settlementCurrency" class="form-item">
          <el-radio-group v-model="formData.settlementCurrency">
            <el-radio label="USD">
              美元
            </el-radio>
            <el-radio label="CNY">
              人民币
            </el-radio>
            <el-radio label="HKD">
              港元
            </el-radio>
            <el-radio label="EUR">
              欧元
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="账户名称" prop="accountName" class="form-item">
          <el-input
            v-model="formData.accountName"
            placeholder="请输入账户名称"
            clearable
          />
        </el-form-item>

        <el-form-item label="预存金额" prop="preDepositAmount" class="form-item">
          <el-input
            v-model="formData.preDepositAmount"
            placeholder="请输入预存金额"
            clearable
          >
            <template #append>
              {{ formData.settlementCurrency }}
            </template>
          </el-input>
        </el-form-item>
      </div>

      <!-- 公司信息 -->
      <div class="form-section">
        <h3 class="section-title">
          公司信息
        </h3>

        <el-form-item label="公司名称" prop="companyName" class="form-item">
          <el-input
            v-model="formData.companyName"
            placeholder="请输入公司名称"
            clearable
          />
        </el-form-item>

        <el-form-item label="营业执照附件" prop="businessLicense" class="form-item">
          <div class="upload-container">
            <SingleImageUpload />
            <!-- <el-upload
              ref="uploadRef"
              :file-list="fileList"
              :before-upload="beforeUpload"
              :on-remove="handleRemove"
              :on-change="handleChange"
              :auto-upload="false"
              accept=".jpg,.png,.jpeg"
              :limit="1"
            >
              <el-icon class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
            <div class="upload-tip">
              支持格式:.jpg .png .jpeg,单个文件不能超过20MB
            </div> -->
          </div>
        </el-form-item>

        <el-form-item label="公司地址" prop="companyAddress" class="form-item">
          <el-input
            v-model="formData.companyAddress"
            placeholder="请输入公司地址"
            clearable
          />
        </el-form-item>
      </div>

      <!-- 操作按钮 -->
      <div class="form-actions form-item">
        <el-button size="large" @click="handleCancel">
          取消
        </el-button>
        <el-button type="primary" size="large" @click="handleSubmit">
          提交开始申请
        </el-button>
      </div>
    </el-form>
  </div>
</template>

<style scoped lang="scss">
.form-content {
  padding: 20px 0;
  border: #dcdfe6 solid 1px;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  margin: 20px;
}

.form-item {
  width: 40%;
}

.application-form {
  .form-section {
    margin-bottom: 40px;

    .section-title {
      font-size: 14px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 24px;
      padding-bottom: 12px;
    }
  }

  .form-tip {
    font-size: 12px;
    color: #909399;
    margin-top: 4px;
    line-height: 1.4;
  }

  .upload-container {
    .upload-tip {
      font-size: 12px;
      color: #909399;
      margin-top: 8px;
    }
  }

  .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 40px;
    padding-top: 24px;
  }
}

// 表单项样式调整
:deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
  font-size: 14px;
}

:deep(.el-form-item.is-required .el-form-item__label::before) {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}

:deep(.el-radio-group) {
  .el-radio {
    margin-right: 24px;
  }
}

:deep(.el-upload) {
  .el-button {
    margin-right: 0;
  }
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
